<template>
  <div class="up">
    <div class="left">
      用户名: <div :class="data.ff ? 'red' : ''">
        <input type="text" v-model="data.name" :class="data.ff ? 'red' : ''"> <span
          v-show="data.ff">用户名必须是6~18位数字.字母.下划线.</span>
      </div>
      <br>
      <button @click="add(1)">{{ mig }}</button>
    </div>
    <div :class="[{ 'bg': data.ss == 1 }, 'right']">
      <div >
        <el-radio-group v-model="radio" v-for="(item, index) in arr" :key="index" v-show="data.ss == index">
          <el-radio :label="3">{{item.title}}</el-radio>
        
        </el-radio-group>

      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'


const data = reactive({
  name: '',
  ff: false,
  df: false,
  ss: 0
})
const mig = ref('登录')
const arr = ref([])
const add = (i) => {
  const a = /^[\w]{6,18}$/
  console.log(a.test(data.name))
  if (!data.df) {
    if (a.test(data.name)) {
      data.ff = false
      data.ss = i
      data.df = true
      mig.value = '登出'
    } else {
      data.ff = true
      data.ss = 0
    }

  } else {
    data.df = false
    mig.value = '登录'
    data.ss = 0
    data.name = ""
  }


}

axios.get('/data.json').then(res => {
  console.log(res);
  arr.value = res.data.data
})
</script >

<style lang="scss" scoped>
.up {
  width: 100%;
  display: flex;
  height: 100vh;

  .left {
    flex: 1;

  }

  .right {
    flex: 1;
    background: #000;
  }
}

.red {
  color: red;
}

.bg {
  background: #ffffff !important;
}
</style>
